<template>
  <div class="route-page">
    <!-- 页面标题和搜索区域 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">
          <CarOutlined />
          全部路线
        </h1>
        <p class="page-subtitle">精选旅游路线，让你的旅程更加精彩</p>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="container">
        <a-input-search
          v-model:value="searchValue"
          placeholder="搜索路线名称"
          enter-button="搜索"
          size="large"
          allow-clear
          @search="onSearch"
          style="max-width: 500px"
        />
      </div>
    </div>

    <!-- 路线列表 -->
    <div class="content-section">
      <div class="container">
        <div v-if="routeVOs.length > 0" class="route-grid">
          <RouteCard
            v-for="route in routeVOs"
            :key="route.id"
            :route="route"
            @click="showRouteDetail"
          />
        </div>

        <div v-else-if="!loading" class="no-data">
          <a-empty description="暂无路线数据">
            <template #image>
              <CarOutlined style="font-size: 48px; color: #d9d9d9" />
            </template>
          </a-empty>
        </div>

        <div v-if="loading" class="loading-state">
          <a-spin size="large" />
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-section" v-if="routeVOs.length > 0">
      <div class="container">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-total="
            (total: number, range: [number, number]) =>
              `第 ${range[0]}-${range[1]} 条，共 ${total} 条路线`
          "
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['12', '24', '36', '48']"
          @change="handlePageChange"
          @showSizeChange="handlePageSizeChange"
        />
      </div>
    </div>

    <!-- 路线详情模态框 -->
    <a-modal
      v-model:open="routeDetailVisible"
      :title="selectedRoute?.routeName"
      width="900px"
      :footer="null"
      centered
    >
      <RouteDetailModal v-if="selectedRoute" :route="selectedRoute" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { CarOutlined } from '@ant-design/icons-vue'
import { getListRouteVo } from '@/api/routeController'
import RouteCard from '@/components/RouteCard.vue'
import RouteDetailModal from '@/components/RouteDetailModal.vue'

const routeVOs = ref<API.RouteVO[]>([])
const searchValue = ref<string>('')
const loading = ref(false)

// 模态框状态
const routeDetailVisible = ref(false)
const selectedRoute = ref<API.RouteVO | null>(null)

// 分页相关状态
const pagination = ref({
  current: 1,
  pageSize: 12,
  total: 0,
})

// 获取路线数据
const fetchData = async (params: API.getListRouteVOParams = {}) => {
  try {
    loading.value = true
    const requestParams = {
      current: pagination.value.current,
      pageSize: pagination.value.pageSize,
      ...params,
    }

    const res = await getListRouteVo(requestParams)

    if (res.data.code === 200 && res.data.data) {
      const pageData = res.data.data
      routeVOs.value = pageData.records ?? []
      pagination.value.total = parseInt(pageData.total ?? '0')
      pagination.value.current = parseInt(pageData.current ?? '1')
      pagination.value.pageSize = parseInt(pageData.size ?? '12')
    } else {
      message.error('获取路线数据失败')
    }
  } catch {
    message.error('获取路线数据失败')
  } finally {
    loading.value = false
  }
}

// 搜索路线
const onSearch = async (searchValue: string) => {
  pagination.value.current = 1 // 搜索时重置到第一页
  await fetchData({ routeName: searchValue })
}

// 处理分页变化
const handlePageChange = (page: number, pageSize: number) => {
  pagination.value.current = page
  pagination.value.pageSize = pageSize
  fetchData({ routeName: searchValue.value || undefined })
}

// 处理每页条数变化
const handlePageSizeChange = (current: number, size: number) => {
  pagination.value.current = 1 // 改变每页条数时重置到第一页
  pagination.value.pageSize = size
  fetchData({ routeName: searchValue.value || undefined })
}

// 显示路线详情
const showRouteDetail = (route: API.RouteVO) => {
  selectedRoute.value = route
  routeDetailVisible.value = true
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.route-page {
  min-height: 100vh;
  background: #fafafa;
}

/* 页面标题区域 */
.page-header {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  padding: 60px 0 40px 0;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-title .anticon {
  font-size: 2rem;
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  background: white;
  padding: 30px 0;
  border-bottom: 1px solid #f0f0f0;
}

.search-section .container {
  display: flex;
  justify-content: center;
}

/* 内容区域 */
.content-section {
  padding: 40px 0;
  background: white;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 路线网格布局 */
.route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* 无数据和加载状态 */
.no-data,
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
}

/* 分页区域 */
.pagination-section {
  background: white;
  padding: 30px 0 40px 0;
  border-top: 1px solid #f0f0f0;
}

.pagination-section .container {
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    padding: 0 16px;
  }

  .route-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .page-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 40px 0 30px 0;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .content-section {
    padding: 30px 0;
  }

  .route-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .search-section {
    padding: 20px 0;
  }

  .pagination-section {
    padding: 20px 0 30px 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }

  .page-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 8px;
  }

  .route-grid {
    grid-template-columns: 1fr;
  }
}
</style>
